<template>
  <!-- 张权 2023年4月2日 20点53分 -->
  <!-- 首页页面 -->
  <div id="Index">
    <!-- 大轮播图 -->
    <el-carousel :interval="5000" arrow="always" height="528px">
      <el-carousel-item v-for="item in imgList" :key="item.id" @click.native="toPage(item)">
        <img :src="`${$imageUrl}?id=` + item.imageId" class="image">
      </el-carousel-item>
    </el-carousel>
    <div id="div1">
      <!-- 今日特价 -->
      <NowDayCheap id=""></NowDayCheap>
      <!-- 缓冲图片 -->
      <div id="div8">
        <el-image :src="centerImg1"></el-image>
      </div>
      <!-- 特色DIY -->
      <CharacteristicDIY></CharacteristicDIY>
      <div id="div7">
        <el-image :src="centerImg"></el-image>
      </div>
      <!-- 限时抢购 -->
      <SeckillList id="seckillList"></SeckillList>
      <!-- 商品分类 -->
      <ShopsClassify></ShopsClassify>
    </div>
  </div>
</template>
<script>
// 引入DIY组件
import CharacteristicDIY from '../components/diy/CharacteristicDIY.vue'
// 引入今日特价组件
import NowDayCheap from '../components/diy/NowDayCheap.vue'
// 引入商品分类组件
import ShopsClassify from '../components/classify/ShopsClassify.vue'
// 引入限时抢购组件
import SeckillList from '../components/seckillList/SeckillList.vue'
export default {
  // 使用组件 
  components: {
      CharacteristicDIY,
      NowDayCheap,
      ShopsClassify,
      SeckillList
  },
  data () {
    return {
      // 大轮播信息
      imgList: [],
      // 插图
      centerImg1: require("../assets/image/banner1.png"),
      // div7插图
      centerImg: require("../assets/image/img1.jpg"),
      // div8插图
      centerImg2: require("../assets/image/img2.jpg"),
    }
  },
  mounted () {
      this.slideShowByType()
  },
  methods: {
    // 跳转页面
    toPage (data) {
      if (data.commdiyId === 2){
          this.$router.push({
              path: data.url,
              query:{ id: data.carouselId }
          });
      }
      if (data.commdiyId === 1){
          this.$router.push({
              path: data.url,
              query:{ diyId: data.carouselId }
          });
      }
    },
    // 获取轮播图信息
    slideShowByType () {
        this.$axios.get('/slideShow/slideShowByType').then(res => {
            if (res.data.flag) {
                this.imgList = res.data.data
            }else{
                this.myMessage('error', res.data.data)
            }
        }).catch(err => {
            console.log(err)
        })
    },
    // 封装弹窗
    myMessage (type, message) {
        this.$message({
            message: message,
            type: type
        })
    }
  }
}
</script>
<style scoped>
  #seckillList{
    margin: 50px 0;
  }
  #div8{
    width: 100%;
  }
  #div7{
    width: 100%;
    margin-top: 80px;
  }
/*页面居中*/
  .center {
    width: 80%;
    margin: 0 auto;
  }
  .characteristic {
    margin-top: 30px;
    padding-top: 10px;
    border-radius: 50px;
  }
  .characteristic_text {
    position: absolute;
    left: 24.5%;
    width: 240px;
    height: 70px;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 1) 100%
    );
  }
  .characteristic_i {
    margin: 0 auto;
    height: 330px;
    width: 240px;
    box-shadow: 8px 8px 10px #475669;
    border-radius: 2px;
    background: #fff;
  }
  .center_img {
    width: 100%;
    height: 264px;
  }
  .center_img > div {
    width: 50%;
    display: inline-block;
  }
  .center_img img {
    height: 220px;
    display: inline-block;
  }
  #span1{
    text-decoration:line-through;
    color: black;
    font-size: 12px;
    font-weight: 500;
    margin-left: 10px;
  }
  #p1{
    color: #cc3124;
    font-weight: 700;
    margin-left: 15px;
  }
  #p2{
    margin-left: 15px;
  }
  /** 导航 */
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .image{
    width: 100%;
    height: 100%;
    cursor:pointer;
  }
  .image1{
    width: 200px;
    height: 200px;
    margin: auto;
    margin: 5px;
  }
  #div1{
    width: 100%;
    margin: auto;
    overflow: hidden;
    align-content: flex-start;
    
  }
  #div2{
    width: 74%;
    height: 500px;
    margin: auto;
  }
  #h2{
    margin-top: 64px;
    text-align: center;
    text-align: center;
    letter-spacing: 10px;
    font-family: 'Times New Roman', Times, serif;
    margin: 30px 0 14px 0;
  }
  #div3{
    width: 100%;
    height: 420px;
    overflow: hidden;
    display: flex;
  }
  .div4{
    flex: 5;
    height: 320px;
    background: white;
    margin: 10px 10px;
    float: left;
    padding: 10px;
    overflow: hidden;
    cursor:pointer;
    position: relative;
  }
  .elcarousel{
    margin: 0 auto;
    width: 210px;
    height: 320px;
    background: white;
    padding: 10px;
    overflow: hidden;
    cursor:pointer;
    position: relative;
  }
  .elcarousel:hover{
    transform: scale(1.02);
    transition: 0.5s;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
  }
  .elcarousel:hover #div6{
    background-color: #cc3124;
    color: #fff;
  }
  .div4:hover{
    transform: scale(1.02);
    transition: 0.5s;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
  }
  .div4:hover #div6{
    background-color: #cc3124;
    color: #fff;
  }
  #div5{
    width: 100%;
    height: 300px;
    background: #475669;
  }
  #div6{
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    line-height: 36px;
    color: #cc3124;
    border: 1px solid #cc3124;
    font-size: 16px;
    font-weight: 700;
    position: absolute;
    left: 77%;
    top: 77%;
  }
</style>
